.header{
  grid-column: full-start / col-end 6;
  background-image: linear-gradient(rgba($color-secondary,.93),rgba($color-secondary,.93)),url("../img/hero.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding:4rem 8rem 8rem;


  display: grid;
  grid-template-rows: 1fr min-content minmax(6rem,min-content) 1fr;
  grid-template-columns: minmax(min-content,max-content);
  grid-row-gap: 1.5rem;
  justify-content: center;

  @media only screen and (max-width:$bp-medium) {
    grid-column: 1 / -1;
  }


  @media only screen and (max-width:$bp-small) {
    padding: 5rem;
  }

  &__logo {
    height: 3rem;
    justify-self: center;
  }
  &__btn{
    align-self: start;
    justify-self: start;
  }

  &__seenon-text{
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-column-gap: 1.5rem;
    align-items: center;

    font-size: 1.6rem;
    color: $color-grey-light-2;

    &::before,
    &::after {
      content: "";
      height: 1px;
      display: block;
      background-color: currentColor;
    }
  }
  &__seenon-logos{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-column-gap: 3rem;
    justify-items: center;
    align-items: center;
    img{
      max-height: 2.5rem;
      max-width: 100%;
      filter: brightness(70%);
    }
  }
}